<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-01-07 23:30:50
-->
<template>
  <div ref="right1_container" style="height: 95%">
   
  </div>
</template>

<script>
import { DualAxes } from '@antv/g2plot';

export default {
  data() {
    return {
      dataArr:[
      { time: '0:00', value: 3, count: 10 },
      { time: '1:00', value: 4, count: 4 },
      { time: '2:00', value: 3.5, count: 5 },
      { time: '4:00', value: 3.5, count: 5 },
      { time: '5:00', value: 4.9, count: 4.9 },
      { time: '6:00', value: 6, count: 35 },
      { time: '7:00', value: 7, count: 7 },
      { time: '8:00', value: 9, count: 1 },
      { time: '9:00', value: 13, count: 20 },
                
                      
      ]
    }
  },
  mounted() {
    this.initChart()
  },
  methods:{
    initChart(){

      const dualAxes = new DualAxes(this.$refs.right1_container, {
          data: [this.dataArr,this.dataArr],
          xField: 'time',
          yField: ['value', 'count'],
          geometryOptions: [
            {
              geometry: 'line',
              color: '#5B8FF9',
            },
            {
              geometry: 'line',
              color: '#5AD8A6',
            },
          ],
        });

        dualAxes.render();
    }
  }
}
</script>
<style scoped>

</style>